@charset "UTF-8";
@import url('./variable');

// 商品列表
.product-list-wrapper {
  display: flex;
}
.product-list {
  @cover_width: 45.8667vw;

  margin-right: 2.6667vw;
  &:nth-child(2n) {
    margin-right: 0;
  }
  .product {

    width: @cover_width;
    margin-top: 4vw;
    
    overflow: hidden;
    background-color: #fff;
    border-radius: 1.6vw;
    
    .product__cover {
      width: 100%;
      height: @cover_width;
    }
    .product__info {
      margin: 1.6vw 1.6vw 3.2vw;
    }
    .product__row {
      display: flex;
      align-items: center;
      margin-bottom: 1.6vw;
    }
    .product__title {
      position: relative;
      display: -webkit-box;
      margin-bottom: 1.6vw;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      &.product__title--supermarket {
        text-indent: 12.8vw;
        &::before {
          position: absolute;
          top: .8vw;
          left: 0;
          width: 11.7333vw;
          height: 3.7333vw;
          content: "";
          background: url("../img/icon_supermarket.png") no-repeat 0 0;
          background-size: contain;
        }
      }
      &.product__title--world {
        text-indent: 10.6667vw;
        &::before {
          position: absolute;
          top: .8vw;
          left: 0;
          width: 9.6vw;
          height: 3.7333vw;
          content: "";
          background: url("../img/icon_world.png") no-repeat 0 0;
          background-size: contain;
        }
      }
    }
    .product__feature {
      margin: 1.6vw;
      margin-left: 0;
      &.product__feature--double {
        padding: 0 .8vw;
        font-size: 2.6667vw;
        color: @main_color;
        border: 1px solid @main_color;
        border-radius: .5333vw;
      }
      &.product__feature--low {
        position: relative;
        padding-right: .8vw;
        font-size: @small_font_size;
        color: @main_color;
        text-indent: 4vw;
        background-color: rgba(255, 32, 120, 0.07);
        &::before {
          position: absolute;
          top: .8vw;
          left: .8vw;
          width: 3.2vw;
          height: 3.2vw;
          content: "";
          background: url("../img/icon_low.png") no-repeat 0 center;
          background-size: contain;
        }
      }
    }
    .product__price {
      margin-right: 1.6vw;
      color: @main_color;
      .big_txt {
        font-size: 5.3333vw;
      }
    }
    .product__ticket {
      position: relative;
      width: 19.4667vw;
      height: 4vw;
      img {
        width: 100%;
      }
      .txt {
        position: absolute;
        inset: 0;
        line-height: 4.8vw;
        text-align: center;
        font-size: 2.6667vw;
        color: @main_color;
      }
    }
    .product__tag {
      width: 6.9333vw;
      height: 3.7333vw;
      margin-right: .8vw;
      img {
        width: 100%;
      }
    }
    .product__comment {
      flex: 1;
      font-size: @small_font_size;
      color: #999;
    }
    .product__similarity {
      margin-left: 1.6vw;
      padding: .8vw 1.6vw;
      font-size: 2.9333vw;
      background-color: #f2f2f2;
      border-radius: 2.6667vw;
      color: #262626;
    }
  }
}
